<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-20 11:53:31
 * @LastEditTime: 2019-09-20 08:32:29
 * @LastEditors: Please set LastEditors
 -->
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
	<div class="row">
		<div class="portlet-title">
			<legend>饼状图数据配置</legend>
		</div>
		<f:form.hidden name="datas[charttype]" value="pie" />
		<div class="col-md-7">
			<div class="col-md-12">
				<div id="realTimeInvoke" class="chart" style="height: 450px; width: 100%"></div>
				<f:render partial="Demo/Pie" arguments="{_all}" />
			</div>
		</div>
		<div class="col-md-5">
			<div class="form-group">
				<label for="title" class="control-label">系列名称</label>
				<f:form.textfield name="datas[name]" class="form-control" placeholder="请填写系列名称" value="{name}" />
			</div>
			<div class="form-group">
				<label for="theme" class="control-label">图表显示数据<small> <a href="#demoModal" data-toggle="modal"
							data-target="#demoModal"> 【<i class="fa fa-adjust"></i>查看示例】</a></small></label>
				<table class="table table-bordered">
					<thead>
						<tr>
							<th width="12%" class="text-center">序号</th>
							<th width="40%">数据类别</th>
							<th width="30%">数据(数字)</th>
							<th width="10%" class="text-center">操作</th>
						</tr>
					</thead>
					<tbody>
						<f:if condition="{datas}">
							<f:then>
								<f:for each="{datas}" as="vo" iteration="item">
									<tr>
										<td><input type="text" class="no-border form-control" value="{item.cycle}" readonly /></td>
										<td><f:form.textfield class="no-border form-control" name="datas[axis][]" value="{vo.name}" /></td>
										<td><f:form.textfield class="no-border form-control" name="datas[value][]" value="{vo.value}" /></td>
										<td align="center"><button class="btn btn-danger add-input" onclick="delOneDom(this);return false;"><i class="fa fa-times"></i></button></td>
									</tr>
								</f:for>
							</f:then>
							<f:else>
								<tr>
									<td><input type="text" class="no-border form-control" readonly value="1" /></td>
									<td><f:form.textfield class="no-border form-control" name="datas[axis][]" /></td>
									<td><f:form.textfield class="no-border form-control" name="datas[value][]" /></td>
									<td align="center"><button class="btn btn-danger add-input" onclick="delOneDom(this,'new');return false;"><iclass="fa fa-times"></i></button></td>
								</tr>
							</f:else>
						</f:if>
						<tr>
							<td colspan="3"></td>
							<td align="center"><button class="btn btn-default add-input" onclick="addOneDom(this);return false;"><i class="fa fa-plus"></i></button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		
	</div>
	<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="demoModalLabel">数据添加示例</h4>
				</div>
				<div class="modal-body">
					<img src="{f:uri.resource(path:'Echarts/Picture/pie.png')}"
						style="margin-top: 10px;width: 100%;cursor: pointer;">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

</html>